<template>
	<view :style="{height:hei + 'rpx'}" class="cla">
		<view v-for="(itme,index) in tab" :key="index"  @tap="fanhui(itme.text,index)" class="xiabiao" :style="{width:changdu + 'rpx'}">
			<view style="margin: 0;padding: 0;">
				<image :src="itme.iconPath" style="width: 55rpx;height: 55rpx;vertical-align: bottom;" v-if="index != num"></image>
				<image :src="itme.selectedIconPath" mode="" style="width: 55rpx;height: 55rpx;vertical-align: bottom;" v-if="index == num" class="suofang"></image>
			</view>
			<view  :style="[{color:index == num ? '#FF4E00':'#393939'}]" class="fon">
				<text :class="index == num ? 'suofang_size' : 'font'" :style="{top: textTop}">
					{{itme.text}}
				</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		 props: {
			currentPage: Number,
			tubiao: Number
		},
		data() {
			return{
				hei:"110",
				num:0,
				tab:[
					{
					    pagePath : "pages/tabBer/newsshouye/newsshouye",
					    iconPath : "http://img.curiousmore.com/949203",
					    selectedIconPath: "http://img.curiousmore.com/198680",
					    text : "首页"
					},
					{
					    pagePath : "pages/tabBer/meet/meet",
					    iconPath : "http://img.curiousmore.com/96469",
					    selectedIconPath : "http://img.curiousmore.com/962548",
					    text : "课程表"
					},
					{
					    pagePath : "pages/tabBer/newsshouye/newsshouye",
					    iconPath : "http://img.curiousmore.com/623100",
					    selectedIconPath: "http://img.curiousmore.com/181030",
					    text : "排课表"
					},
					{
					    pagePath : "pages/tabBer/meet/meet",
						iconPath : "http://img.curiousmore.com/192857473527",
						selectedIconPath : "http://img.curiousmore.com/267043662693",
					    text : "宝宝秀"
					},
					{
					    pagePath : "pages/tabBer/meet/meet",
					    iconPath : "http://img.curiousmore.com/717910",
					    selectedIconPath : "http://img.curiousmore.com/710689",
					    text : "订单"
					},
					{
					    pagePath : "pages/tabBer/friend/friend",
					    iconPath : "http://img.curiousmore.com/191123",
					    selectedIconPath : "http://img.curiousmore.com/470594",
					    text : "收益"
					},
					{
					    pagePath : "pages/tabBer/friend/friend",
					    iconPath : "http://img.curiousmore.com/812672",
					    selectedIconPath : "http://img.curiousmore.com/225321",
					    text : "我的"
					}
				],
				changdu:"",
				textTop: ""
			}
		},
		methods:{
			fanhui(inde,index){
				this.num = index
				this.$emit('fan',inde)
			}
		},
		
		onLoad() {
			
		},
		
		created() {
			let _this = this
			if(this.tubiao == 4){
				this.fanhui("宝宝秀",2)
			}
			uni.getSystemInfo({
				success(res) {
					let str = res.model.replace(/\s/g,"")
					let xiao = str.toLowerCase()
					if(xiao.indexOf("iphonex") > -1 || xiao.indexOf("iphone11") > -1 || xiao.indexOf("iphone12") > -1 ){
						_this.hei = 140
					}
					if(res.model.indexOf("iPad") !== -1) {
						_this.textTop = "-10rpx"
					}else {
						_this.textTop = "-15rpx"
					}
				}
			})
			if(_this.currentPage == 1){
				_this.tab.splice(2,1)
				_this.tab.splice(3,2)
			}else if(_this.currentPage == 2){
				_this.tab.splice(0,1)
				_this.tab.splice(2,1)
			}else if(_this.currentPage == 3){
				_this.tab.splice(0,1)
				_this.tab.splice(1,1)
			}
			let num = _this.tab.length
			_this.changdu = 750/num - 2
		}
	}
</script>

<style>
	.fon{
		margin: 0;
		margin: 0;
	}
	.xiabiao{
		text-align: center;
		display: flex;
		flex-direction: column;
	}
	.cla{
		position: fixed;
		width: 750rpx;
		background: #FFFFFF;
		bottom: 0;
		z-index: 12121;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		z-index: 111111111;
		padding-top:10rpx ;
		border-top: 0.2rpx #FFCCA2 solid;
	}
	  .suofang{
		position:relative;
		animation:mymove 0.2s ease 1 forwards;
		-webkit-animation:mymove 0.2s ease 1 forwards; /*Safari and Chrome*/
	}
	.font{
		font-size: 21rpx;
		color: #393939;
		position: relative;
	}
	.suofang_size{
		position:relative;
		animation:mymove_ 0.2s ease 1 forwards;
		-webkit-animation:mymove_ 0.2s ease 1 forwards; /*Safari and Chrome*/
	}
	@keyframes mymove_{
		0%{
			font-size: 21rpx;
		  /*开始为原始大小*/
		}
		50%{
			font-size: 24rpx;
		}
		100%{
			font-size: 21rpx;
		}
	
	}
	 @keyframes mymove{
		0%{
		transform: scale(1);  /*开始为原始大小*/
		}
		50%{
			transform: scale(1.15);
		}
		100%{
			transform: scale(1);
		}

	}
</style>
